{include file="common/header"}
<div id="app" class="el-login-page" v-cloak>
    <div class="el-login-wrapper">
        <div class="container">
            <div class="logo">
                <img src="/admin/images/logo_site.png">
            </div>
            <div class="form">
                <div class="title">管理员登录</div>
                <div class="ctitle">输入账号密码登录</div>
                <el-form :model="loginForm" :rules="rules" ref="loginForm" @submit.native.prevent>
                    <el-form-item prop="account">
                        <el-input v-model="loginForm.account" prefix-icon="el-icon-user" placeholder="请输入账号/邮箱号" @keyup.enter.native="submitForm()">
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input v-model="loginForm.password" prefix-icon="el-icon-key" placeholder="请输入密码" show-password @keyup.enter.native="submitForm()">
                        </el-input>
                    </el-form-item>
                    <el-form-item> 
                        <div style="display: flex;">
                            <el-input v-model="loginForm.captcha"  prefix-icon="el-icon-warning-outline" placeholder="请输入验证码" @keyup.enter.native="submitForm()">
                                <div slot="suffix">
                                    <img @click="rand = common.id(8)" :src="captcha_src + '?rand=' + rand" style="width: 160px;height:40px">
                                </div>
                            </el-input>
                        </div>
                    </el-form-item>
                    <el-button @click="submitForm()" :loading="loading" plain>
                        登录
                    </el-button>
                    <div class="bottom">
                        <a :href="admin_url('login/passwordEmail')">已有账号，忘记密码？</a>
                    </div>
                </el-form>
            </div>
            <div class="footer">
                <a href="{:config('app.api')}" target="_blank">Copyright @ OneKeyAdmin Inc All Rights Reserved.</a>
            </div>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                rand: '',
                captcha_src: "{:captcha_src()}",
                loading: false,
                loginForm: {
                    account: "",
                    password: "",
                    captcha: "",
                },
                rules: {
                    account: [
                        { required: true, message: "请输入账号", trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: "请输入密码", trigger: 'blur' },
                    ],
                    captcha: [
                        { required: true, message: "请输入验证码", trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            /**
             * 点击登录
             */
            submitForm() {
                let self = this;
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        self.loading = true;
                        request.post('login/index', self.loginForm, function (res){
                            self.loading = false;
                            self.$notify({ showClose: true, message: res.message, type: res.status});
                            if (res.status === 'success') {
                                top.location.href = admin_url();
                            } else {
                                self.rand = common.id(8);
                            }
                        })
                    } else {
                        return false;
                    }
                })
            },
            admin_url(link) {
                return admin_url(link);  
            },
        }
    })
</script>
{include file="common/footer"}